<template>
  <view class="messages-container">
    <view :style="{ height: height + 'px', background: '#fff' }"></view>
    <u-navbar
      title="消息"
      :fixed="false"
      :safeAreaInsetTop="false"
      leftIcon=""
    ></u-navbar>
    <view class="card">
      <view class="card-item" @click="gotoSystem">
        <view class="box">
          <image
            class="img"
            src="../../static/message/shenhe.png"
            mode="scaleToFill"
          />
        </view>
        <view class="name">审核通知</view>
      </view>
      <view class="card-item" @click="gotoResource">
        <view class="box">
          <image
            class="img"
            src="../../static/message/ziyuan.png"
            mode="scaleToFill"
          />
        </view>

        <view class="name">
          <view class="text"> 一手资讯 </view>
          <view class="explain">一手资讯版块，招收投稿合作</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      height: "",
    };
  },
  onLoad(options) {
    this.height = uni.getSystemInfoSync().statusBarHeight;
  },
  methods: {
    gotoSystem() {
      this.$u.route("/pages/message/systemMessage");
    },
    gotoResource() {
      this.$u.route("/pages/message/resource");
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  display: flex;
  align-items: center;
  flex-direction: column;
  .card-item {
    margin-bottom: 20rpx;
    width: 710rpx;
    height: 250rpx;
    border: 4rpx solid #cbcbcb;
    border-radius: 15rpx;
    display: flex;
    align-items: center;
    .box {
      height: 120rpx;
      width: 120rpx;
      border-radius: 50%;
      background-color: #eaeaf2;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 20rpx;
      .img {
        width: 60rpx;
        height: 60rpx;
      }
    }
    .name {
      margin-left: 15rpx;
      font-size: 29rpx;
      font-weight: 500;
      .explain {
        font-size: 24rpx;
        color: #6c6b75;
        margin-top: 10rpx;
      }
    }
  }
}
</style>

<style>
page {
  height: 100%;
  background-color: #fff;
}
</style>
